<template>
  <div>
    <a-row :gutter="setting.options.gutter" >
      <a-col
        v-for="item in FtagsData"
        :key="item"
        :span="item.span"
        :offset="item.offset"
      >
        <div
          class="widget"
          :style="{
            background: item.bgColor,
            borderRadius: setting.options.brRadious + 'px',
          }"
        >
          <div class="stats-icon-lg">
            <p>{{ item.topTitle }}</p>
            <p>{{ item.middleTitle }}</p>
            <a-progress
              :percent="30"
              size="small"
              strokeColor="white"
              :showInfo="false"
            />
            <p class="lastP">{{ item.bottomTitle }}</p>
          </div>
          <span>
            <vab-icon :icon="item.icon" class="stats-icon"></vab-icon>
          </span>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  import VabIcon from '@/layout/vab-icon'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    name: 'Ftags',
    components: {
      VabIcon,
    },
    props: ['setting', 'viewData'],
    data() {
      return {
        FtagsData: [],
        viewdata: this.viewData,
      }
    },
    created() {
      // console.log(11111, this.setting)
      if (this.setting == null || this.viewdata == null) {
        var that = this
        // console.log('-=-=-=-=-=-',that.dataC.options.dbId,that.dataC.options.sql)
        Getsqlcolumns({
          DbId: that.setting.options.dbId,
          Sql: that.setting.options.sql,
          isdata: true,
        }).then((res) => {
          if (res.isSuccess) {
            //this.$message.success('参数返回成功，请至参数编辑进行设置')
            // console.log('res', res)
            // this.FtagsData = res.content.items
            if (res.content.data.length > 0) {
              this.viewdata = res.content.data[0]
              this.dataHandling()
            } else {
              return this.$message.error('数据为空')
            }
          } else {
            this.$message.error('sql语句语法错误' + res.message)
          }
        })
        return false
      }

      this.dataHandling()
    },
    methods: {
      dataHandling() {
        this.FtagsData = JSON.parse(
          JSON.stringify(this.setting.options.columns)
        ) //深拷贝，防止下面赋值从而改变this.setting的值
        this.FtagsData.forEach((item) => {
          // console.log(item, '----', this.viewdata)
          Object.keys(this.viewdata).forEach((key) => {
            if (item.topTitle == key) {
              item.topTitle = this.viewdata[key]
            }
            if (item.middleTitle == key) {
              item.middleTitle = this.viewdata[key]
            }
            if (item.bottomTitle == key) {
              item.bottomTitle = this.viewdata[key]
            }
          })
        })
      },
    },
  }
</script>
<style scoped lang="less">
  .widget {
    height: 140px;
    //background-color: #32A932;
    line-height: 15px !important;
    //border-radius: 4px;
    position: relative !important;
    .stats-icon-lg {
      font-family: 'Open Sans', sans-serif;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
      position: absolute !important;
      width: 100%;
      height: 140px;
      z-index: 5;
      padding: 5px 15px;

      p {
        &:nth-child(1) {
          margin-top: 8px;
          font-weight: 400;
          font-size: 12px;
        }
        &:nth-child(2) {
          margin-top: 12px;
          font-size: 24px;
          color: rgba(255, 255, 255, 1);
        }
      }
      .lastP {
        margin-top: 1px;
        font-size: 12px;
      }
    }
    span {
      top: 80px;
      left: 70%;
      position: relative !important;
      i {
        font-size: 100px !important;
        opacity: 0.4;
        color: white;
      }
    }
  }

  ::v-deep(.ant-progress) {
    margin: 10px 0;
    .ant-progress-inner {
      background-color: black !important;
    }
    .ant-progress-bg {
      height: 3px !important;
    }
  }
</style>
